<template>
  <section>
    <div class="camera">
      <p class="tool_name">关闭录像</p>
      <el-form label-width="80px" ref="editForm">
        <div class="all_areaNames">
          <p style="color: red">未关闭区域(*点击新增)</p>
          <span v-for="(item, index) in notClosedArea" class="map-area" :key="index" @click="takeArea(item, index)" :areaname="item">{{ item }}</span>
        </div>

        <div>
          <p style="color: red">关闭区域(*点击取消)<span></span></p>
          <span v-for="(area_name, index) in closedAreaNames" class="map-area" :key="index" @click="_remove(area_name, index)">{{ area_name }}</span>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <span style="float: right">
          <el-button type="success" @click.native="submitCloseArea">确认修改</el-button>
        </span>
      </div>
    </div>
  </section>
</template>

<script type="text/ecmascript-6">
  import util from '../../util'
  import { apiTree } from '../../apiTree'

  export default {
    data() {
      return {
        closedAreaNames: [],
        notClosedArea: []
      }
    },
    methods: {
      getClosedArea() {
        apiTree('camera/index', 'tools/closeDArea', {}).then((res) => {
          if (res.s === 1) {
            this.closedAreaNames = res.d.data;
            this.notClosedArea = res.d.not_close_area;
          }
        });
      },
      // 选中区域
      takeArea(item, _index) {
        this.notClosedArea.splice(_index, 1);
        this.closedAreaNames.push(item);
      },
      // 单个删除摄像区域
      _remove(_name, _index) {
        this.closedAreaNames.splice(_index, 1);
        this.notClosedArea.push(_name);
        this.notClosedArea = util.uniqueArr(this.notClosedArea);
      },
      // 提交修改内容
      submitCloseArea() {
        let param = {'data': this.closedAreaNames};
        apiTree('camera/index', 'tools/ediCloseArea', param, 'POST').then((res) => {
          if (res.s === 1) {
            this.$notify.success({
              message: '修改成功',
              offset: 100
            });
          }
        });
      }
    },
    created() {
      // 获得关闭的区块
      this.getClosedArea();
    }
  }
</script>

<style lang="scss">
  .camera {
    padding: 10px;
    margin-top: 10px;
    --border: 1px solid #13ce66;
    overflow: hidden;
  }
  .tool_name {
    height: 40px;
    line-height: 40px;
    color: #11b95c;
    text-indent: 6px;
    font-size: 18px;
  }
  .map-area{
    display:inline-block;
    width: 60px;
    height: 35px;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    text-align: center;
    line-height: 35px;
    border: 1px solid #CCCCCC;
    cursor: pointer;
  }
</style>